<template>
	<div class="conversion bg-f5">
		<ul class="auto w92">
  			<li class="mt15 layout-juscon" v-for="item in data">
  				<p class="white align-center coupon-price coupon-img lh100 h100">{{ item.money }}<i class="fs16">元</i></p>
				<div class="pl10 pr10 pt15 pb10 flex_1 bg-white h100">
					<p class="fs14 c333 ellipise bold">{{ item.coupon_name }}</p>
					<p class="fs14 c68">{{ item.exchange_point }}积分兑换<i class="ml5 fs10 white radius integral bg-subject" style="padding:1px 2px">通用券</i></p>
					<div class="layout">
						<span class="fs10 c81 ">有效期:{{ item.end_time, 'yyyy.MM.dd' | formatDate  }}</span>
						<button class="border fs12 pt5 pb5 pl10 pr10 btn" @click="apply(item)">立即兑换</button>
					</div>
				</div>
  			</li>
  		</ul>
	</div>
</template>

<script>
	import { formatDate } from "@/utils";
	import { Dialog } from 'vant';
	export default{
		components: {
			Dialog
		},
		data()
		{
			return{
				data : [],
			}
		},
		filters:
		{
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt);
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				this.$http.get('/coupon/exchangeList').then(res=> {
					this.data = res.data;
				})
			},
			apply(item)
			{
				Dialog.confirm({
				  	message: '您是否确定兑换该优惠券？',
				}).then(() => {
					 this.$http.post('/coupon/exchange',{id : item.coupon_id}).then(res =>{
					 	Dialog.alert({
						  	message: '您已兑换成功！请您在优惠券里查看',
				  			confirmButtonText : '好的'
						}).then(() => {
							this.$router.replace('/personal/integral')
						});
					})
				});
			}
		}
	}
</script>

<style lang="less">
	.conversion{
		.coupon-price{
			width: 115px;
			font-size: 50px;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 100% 100%;
		}
		.coupon-img{
			background-image: url(../../../assets/coupon-bg.png);
		}
		.btn{
			border-color:#f78182;
			color:#fa5f6f;
			border-radius: 15px;
		}
	}
</style>